<!--添加商品-->
<template>
    <div class="add-goods-root">
        <!--‘添加商品’对话框-->
        <el-dialog
                title="添加商品"
                :visible.sync="dialogVisible"
                width="40%"
                :before-close="close"
                :close="close">
            <!--添加商品表单-->
            <el-form ref="formRef" :model="form" label-width="80px">
                <el-form-item label="商品编码" prop="goodsCode">
                    <el-input v-model="form.goodsCode" placeholder="请输入商品编码" clearable></el-input>
                </el-form-item>
              <el-form-item label="商品品牌" prop="blank">
                <el-input v-model="form.blank" placeholder="请输入商品品牌" clearable></el-input>
              </el-form-item>
                <el-form-item label="商品名称" prop="goodsName">
                    <el-input v-model="form.goodsName" placeholder="请输入商品名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="商品种类" prop="typeIdList">
                    <el-select v-model="goodsTypeForShow" multiple placeholder="请选择">
                        <el-option
                                v-for="item in goodsTypeList"
                                :key="item.typeId"
                                :label="item.typeName"
                                :value="item.typeId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品价格" prop="goodsPriceList">
                    <span>勾选‘选框’后输入价格</span>
                    <div v-for="(item, i) in selectGoodsPrice" :key="item.unitId">
                        <el-checkbox @change="change(i)"/>
                        <el-input v-model="item.price"
                                  style="width: 12%; margin-left: 5px"
                                  :disabled="item.checked"/>
                        元 / <el-tag type="warning">{{ unit[i].unit }}</el-tag>
                       <span style="margin-left: 20px"> 活动价格：</span>
                        <el-input v-model="item.lowPrice"
                                  style="width: 12%; margin-left: 5px"
                                  :disabled="item.checked"/>元
                    </div>
                </el-form-item>
            </el-form><!--/ 添加商品表单-->



            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog><!--/ ‘添加商品’对话框-->


    </div>
</template>

<script>
import API from '@/api/api.js';
export default {
    name: "GoodsAdd",
    props: ["goodsTypeList", "unit"],
    data() {
        return {
            dialogVisible: true,

            //
            form: {
                goodsCode: '',
                blank: '',
                goodsName: '',
                status: undefined,
                typeIdList: [],
                goodsPriceList: [],
                stock: [],
            },
            //
            selectGoodsPrice: [],
            goodsTypeForShow: [],

            // 单位
            // unit: [
            //     // {unitId: '1', unit: '罐', isDefault: 1},
            //     // {unitId: '2', unit: '件', isDefault: 1},
            //     // {unitId: '3', unit: '打', isDefault: 1},
            //     // {unitId: '4', unit: '箱', isDefault: 1},
            // ],
            // 商品种类
            // goodsTypeList: [
            //     {typeId: '1', typeName: '酒', isDefault: '1'},
            //     {typeId: '2', typeName: '冷饮', isDefault: '1'},
            //     {typeId: '3', typeName: '热饮', isDefault: '1'},
            //     {typeId: '4', typeName: '牛奶', isDefault: '1'},
            // ],
        }
    },
    mounted() {
        if (this.unit) {
            this.unit.map( u => {
                let temp = {unitId: '', price: 0, lowPrice: 0, checked: true};
                temp.unitId = u.unitId;
                this.selectGoodsPrice.push(temp);
            });
            console.log(this.selectGoodsPrice, 'selectGoodsPrice-----------------');
        }
    },
    methods: {
        close() {
            this.$emit('close');
        },
        submitForm () {
            // 参数处理
            this.goodsTypeForShow.map(t => {
                this.form.typeIdList.push({typeId: t});
            });
            console.log(this.goodsTypeForShow, "goodsTypeForShow--------------");
            //
            this.selectGoodsPrice.filter( item => item.price > 0).map( p => {
                let {checked, ...temp} = Object.assign({}, p);
                this.form.goodsPriceList.push(temp);
            });
            console.log(this.form, '添加商品表单------------');
            let url = API.goods.addGoods;
            let param = JSON.parse(JSON.stringify(this.form));
            let blank = param.blank;
            if (blank) {
              param.goodsName = "【"+ blank +"】"+param.goodsName;
            }
            delete param.blank;
            this.$post(url, param).then(res => {
                let data = res.data;
                if (data.success) {
                    this.close();
                    this.$message.success({
                        showClose: true,
                        message: "添加成功!",
                    });
                } else {
                    this.$message({
                        type: "warning",
                        message: data.msg,
                        showClose: true,
                    })
                }
            })
        },
        //
        change(i) {
            if (!this.selectGoodsPrice[i].price) {
                this.selectGoodsPrice[i].price = 0;
            }
            if (!this.selectGoodsPrice[i].lowPrice) {
                this.selectGoodsPrice[i].lowPrice = 0;
            }
            this.selectGoodsPrice[i].checked = !this.selectGoodsPrice[i].checked;
        }
    },

}
</script>

<style scoped>

</style>
